[S05E10] rxjs-spy ，開發 RxJS 的好工具
https://www.youtube.com/watch?v=0Q0IJrnk-00&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&index=13

本集只有14分鐘
由Mike大神，分享一個測試RxJS的套件
Mike大神blog的文章，寫得非常完整，不用做筆記了
https://wellwind.idv.tw/blog/2018/03/27/rxjs-debugging-with-rxjs-spy/
套件 rxjs-spy
https://www.npmjs.com/package/rxjs-spy

相關文章
rxjs-spy
https://cartant.github.io/rxjs-spy/
Debugging RxJS, Part 1: Tooling
https://blog.angularindepth.com/debugging-rxjs-4f0340286dd3
Debugging RxJS, Part 2: Logging
https://blog.angularindepth.com/debugging-rxjs-part-2-logging-56904459f144

哇哇，一樣是有詳細文章分享的，不太需要做筆記
今天就清鬆過度囉~

有些指令可能過期，請以官網為主

# 安裝
npm install --save-dev rxjs-spy

# 在ts裡引入
import { create } from 'rxjs-spy';
const spy = create();

rxjs-spy，使用前

app.component.ts

import{ HttpClient } from '@angular/common/http';
import{ Component } from '@angular/core';
import { timer } from 'rxjs';
import { switchMap, tap } from 'rxjs/internal/operators';
...
export class AppComponent{
                  0代表從一開始，每5秒跑一次
    post$ = timer(0,5000).pipe(
        switchMap(duration =>
            this.httpClient.get<any>('https://jsonplaceholder.typicode.com/posts/${(duration%10)+1}`)
            ),
            tap(console.log) // tap只是看資料，沒實際影響
            ^^^ 傳統沒用rxjs-spy時，用tap來看資料流(stream)
                但當rxjs的內容很多時，容易下一堆console.log
                (rxjs-spy可以讓我們想顯示時才顯示)
    );
    
    constructor(private httpClient: HttpClient){}
}

{{ (post$ | async)?.title }}

rxjs-spy，使用後

app.component.ts

import{ HttpClient } from '@angular/common/http';
import{ Component } from '@angular/core';
import { timer } from 'rxjs';
import { switchMap, tap } from 'rxjs/internal/operators';
...
export class AppComponent{
    post$ = timer(0,5000).pipe(
        tag('app-timer'), // 替timer()傳回的observable加上tag
        switchMap(duration =>
            this.httpClient.get<any>('https://jsonplaceholder.typicode.com/posts/${(duration%10)+1}`)
            ),
            tag('app-post') // 幫operator加tag
    );
    
    constructor(private httpClient: HttpClient){}
}

然後在Browser的Console工具裡打

• spy.show()
• spy.show('app-timer') 顯示某個tag
• spy.log('app-post') 開始記錄某個observable的運作

在ts裡的控制

• rxSpy.pause() 暫停observable

const deckPost=rxSpy.pause('app-post');
deckPost.resume(); // 一次將記錄的一次顯示

deckPost.skip(); // 乎略一些累積的資料流

deckPost.clear(); 清空next所累積的資料